<!DOCTYPE html>
<th:block xmlns:th="https://www.thymeleaf.org"
          th:insert="~{common/layout :: layout (showTitle = ${#messages.msg('page.categories.browser.title', site.title)}, canonical = @{/categories}, content = ~{::content}, isPost = false)}">
  <th:block th:fragment="content" th:with="isEmpty = ${#lists.isEmpty(categories)}">
    <div th:if="${isEmpty}" class="card card-empty" th:with="title=#{global.route.back.home.name},
            linkHtml='&lt;a href=&quot;/&quot; aria-label=&quot;' + ${title} + '&quot; title=&quot;' + ${title} + '&quot;&gt;' + ${title} + '&lt;/a&gt;',
            finalMessage=${#messages.msg('page.categories.empty.tip', linkHtml)}">
      <i class="ri-inbox-2-fill"></i>
      [(${finalMessage})]
    </div>
    <th:block th:unless="${isEmpty}">
      <div class="card card-content">
        <div class="card-tab">
          <div>[[#{page.categorie.title}]]</div>
        </div>
        <ul class="menu-list">
          <th:block th:replace="~{:: categories (${categories})}"/>
        </ul>
      </div>
    </th:block>
  </th:block>
  <th:block th:fragment="categories (categories)">
    <li th:each="category : ${categories}">
      <a class="level is-marginless" th:href="${category.status.permalink}" th:aria-label="${category.spec.displayName}" th:title="${category.spec.displayName}">
        <span class="level-item" th:text="${category.spec.displayName}"></span>
        <span class="level-item tag" th:text="${category.status.postCount == null ? 0 : category.status.postCount}"></span>
      </a>
      <ul th:if="${!#lists.isEmpty(category.children)}">
        <th:block th:replace="~{:: categories (${category.children})}"/>
      </ul>
    </li>
  </th:block>
</th:block>